<template>
	<!-- <page-meta><navigation-bar title="详情" front-color="#ffffff" background-color="#0081f0" /></page-meta> -->
	
	<view class="" style="overflow: hidden;">
		<view class="Title" style="position: fixed;top: 0;left: 0;width: 100%;z-index: 100;" :style="{background:!topactive?'rgba(0,0,0,0)':'#0081f0'}">
			<view :style="{ 'margin-top': statusBar + 'px' }" style="height: 44px;line-height: 44px;text-align: center;color: #fff;position: relative;">
				<image @tap="goback" src="/static/img/left.svg" style="width: 80rpx;height: 55rpx;float: left;margin-top: 16rpx;margin-left: 15rpx;" mode=""></image>
				<text style="font-size: 18px;font-weight: 600;position: absolute;left: 50%;transform: translateX(-50%);" v-if="topactive">详情</text>
			</view>
		</view>
		<view class="top">
			<image :src="setUrl(obj.headPortrait)" mode=""></image>
			<image class="img1" :src="setUrl(obj.headPortrait)" mode=""></image>
			<button type="default" @tap="guanzhu(1)" v-if="isguanzhu">+关注</button>
			<button type="default" @tap="guanzhu(0)" v-else>取消关注</button>
			<text style="padding-top: 350rpx;display: block;margin-left: 20px;color: #fff;">{{ obj.traderName }}</text>
			<view class="" style="margin-left: 20px;color: #fff;margin-top: 20rpx;">
				<text style="font-size: 14px;color: rgba(255,255,255,.6);">关注</text>
				<text style="font-size: 16px;color: #fff;display: inline-block;margin-left: 3px;margin-right: 10px;">{{guanzhunum}}</text>
				<text style="font-size: 14px;color: rgba(255,255,255,.6);display: inline-block;margin-left: 13px;">订阅</text>
				<text style="font-size: 16px;color: #fff;display: inline-block;margin-left: 3px;margin-right: 10px;">{{ obj.followTotalNum }}</text>
				<!-- <text style="font-size: 14px;color: rgba(255,255,255,.6);">人气</text>
				<text style="font-size: 16px;color: #fff;display: inline-block;margin-left: 3px;margin-right: 10px;">10</text> -->
			</view>
		</view>
		<view style="padding: 10px 0;background: #fff; padding-left: 5px;padding-right: 10px;border-top-right-radius: 15px;border-top-left-radius: 15px;" class="lastTop">
			<div class="div">
				<!-- <h5>{{ obj.traderName }}</h5> -->
				
				<span>
					周期:{{ obj.cycleDay }}天
					<span style="color: #666;font-weight: 500;padding-left: 3px;padding-right: 10px;">| ({{ obj.dealerFollowState == 1 ? '已订阅' : '可订阅' }})</span>
					<p style="float: right;">订阅人数:{{ obj.followTotalNum }}次订阅</p>
				</span>
				<p class="p1">
					<span style="padding-right: 3px;color: #666;">评分:</span>
					<b>{{ obj.score ? obj.score.toFixed(2) : 0 }}/10</b>
					<span style="padding-left: 10px;color: #666;">评价:</span>
					<span style="padding: 0 3px;">{{ obj.grade ? obj.grade : '--' }}</span>

					<span style="padding-left: 5px;display: inline-block;float: right;">最大占用金:{{ obj.maxPosMargin }}</span>
				</p>
				<p class="p3">
					品种：{{ obj.commodityNo }}
					<span style="float: right;">当日手数：{{ obj.thatDayTradeCount }}</span>
				</p>
				<p class="p2">
					收益率:
					<span>{{ obj.profitRate }}%</span>
					(过去12个月)
				</p>
			</div>
		</view>
		<view class="scrollT1" :style="{ display: show ? 'block' : 'none',top:statusBar + 44+'px' }">
			<view class="scroll-view_H" style="border-top: 0;">
				<view class="scroll-view-item_H  border-bt" :class="{ active: nowid == index }" data-current="1" @tap="taptap(index)" v-for="(i, index) in scrooldata">
					{{ i.name }}
				</view>
			</view>
		</view>
		<view style="" ref="scrollT" class="scrollT">
			<view class="scroll-view_H">
				<view class="scroll-view-item_H border-bt" :class="{ active: nowid == index }" data-current="1" @tap="taptap(index)" v-for="(i, index) in scrooldata">
					{{ i.name }}
				</view>
				</view>
			</view>
		</view>
		<view>
			<swiper
				:indicator-dots="false"
				:style="{ height: scrooldata[nowid].height + 'px' }"
				:autoplay="false"
				:current="nowid"
				:interval="800"
				:duration="200"
				:disable-touch="true"
			>
				<swiper-item>
					<ol class="gript">
						
						<li class="active">
							<span>{{ resetstr(jiaoyitj.totalExecutionVolume) }}</span>
							总交易（笔数）
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.totalWinVolume) }}</span>
							盈利交易（笔数）
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.totalLossVolume) }}</span>
							亏损交易（笔数）
						</li>
						<li class="noborder active">
							<span>{{ resetstr(jiaoyitj.profitFactor) }}</span>
							利润因子
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.maxProfit) }}</span>
							最大盈利
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.maxLoss) }}</span>
							最大亏损
						</li>
						<li class="active">
							<span>{{ resetstr(jiaoyitj.totalOrderPl / jiaoyitj.totalExecutionVolume) }}</span>
							预期回报
						</li>
						<li class="noborder">
							<span>{{ resetstr(jiaoyitj.maxProfitLossRate) }}</span>
							最大盈亏比
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.maxContinuousWinProfit) }}</span>
							最大连续盈利金额
						</li>
						<li class="active">
							<span>{{ resetstr(jiaoyitj.maxContinuousProfitNumber) }}</span>
							最大连续盈利笔数
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.avgContinuousLoseProfit) }}</span>
							最大连续亏损金额
						</li>
						<li class="noborder">
							<span>{{ resetstr(jiaoyitj.maxContinuousProfitLoseNumber) }}</span>
							最大连续亏损笔数
						</li>
						<li class="active">
							<span>
								<b style="color: #0891ff;">{{ jiaoyitj.totalWinExecutionVolume }}</b>
							</span>
							总盈利

							<!-- <span>(<b style="color: #0891ff;">5.02</b>点数)</span> -->
						</li>
						<li class="">
							<span>
								<b style="color: #e70807;">{{ resetstr(jiaoyitj.totalLossExecutionVolume) }}</b>
							</span>
							总亏损

							<!-- <span>(<b style="color: #e70807;">5.02</b>点数)</span> -->
						</li>
						<li class="">
							<span>
								<b style="color: #0891ff;">{{ resetstr(jiaoyitj.avgWinExecutionVolume) }}</b>
							</span>
							平均盈利

							<!-- <span>(<b style="color: #0891ff;">5.02</b>点数)</span> -->
						</li>
						<li class="active">
							<span>
								<b style="color: #e70807;">{{ resetstr(jiaoyitj.avgLossExecutionVolume) }}</b>
							</span>
							平均亏损

							<!-- <span>(<b style="color: #e70807;">5.02</b>点数)</span> -->
						</li>
						<li>
							<span>{{ resetstr(jiaoyitj.avgMonthInc * 100) }}%</span>
							每月盈亏
						</li>
						<li>
							<span>{{ jiaoyitj.avgYearInc ? resetstr(jiaoyitj.avgYearInc * 100 + '') : 0 }}%</span>
							年化预测
						</li>
						
						
						
						<li class="active">
							<span>{{resetstr(leftdata.totalTransfer)}}</span>
							初始入金
						</li>
						<li>
							<span>{{resetstr(leftdata.profitRate)}}%</span>
							利润率
						</li>
						<li>
							<span>{{resetstr(leftdata.profit)}}</span>
							累积净利润
						</li>
						<li class="active">
							<span>{{resetstr(leftdata.totalNetAssets)}}</span>
							账户净值
						</li>
						<li>
							<span>{{resetstr(leftdata.maxRetracement)}}%</span>
							最大回撤
						</li>
						
						<li>
							<span v-if="leftdata.avgOpenTime">{{resetstr(leftdata.profit)}}</span>
							<span v-else>0 小时</span>
							累积净利润
						</li>
						<li class="active">
							<span>{{leftdata.dayTradeTimes?leftdata.dayTradeTimes:0}}次</span>
							每天交易
						</li>
						<li>
							<span>{{leftdata.maxPosNum?leftdata.maxPosNum:0}}</span>
							最大持仓手数
						</li>
						<li>
							<span>{{leftdata.maxPosRatio?leftdata.maxPosRatio:0}}%</span>
							最大持仓占比
						</li>
						<li class="active">
							<span>{{(leftdata.avgOpenTime/60 +'').substr(0,4)}} 小时</span>
							平均持有时间
						</li>
						
						<li>
							<span v-if="leftdata.lastTradeTime">{{(leftdata.lastTradeTime + '').replace('T',' ')}}</span>
							<span v-else>--</span>
							最近交易
						</li>
					</ol>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<iframe :src="$store.state.url + '/tongji/demo.html?uid=' + obj.traderUid" frameborder="0" style="width: 100%;" :style="{height:'2580px' }"></iframe>
					</view>
				</swiper-item>
				<swiper-item id="lishicc"><view class="swiper-item">
				<ul class="lishicc">
					<!-- {{menutype}} -->
					<li @tap="clickmenu(index)" v-for="i,index in lishidata" :class="{active:menutype == index}" class="border-bt">
						<p>
							<span>{{i.commodityNo + i.contractDate}}</span>
							<span>{{resetstr(i.profitAndLoss)}}</span>
						</p>
						<p>
							<span>{{i.orderSide==0?'卖':'买'  }}</span>
							<span>{{huobi(i.currency)}}</span>
						</p>
						<div>
							<span>
								合约:<b>{{i.commodityNo + i.contractDate}}</b>
							</span>
							<span>
								盈亏:<b>{{resetstr(i.profitAndLoss)}}</b>
							</span>
							<span>
								方向:<b>{{i.orderSide==0?'卖':'买'  }}</b>
							</span>
							<span>
								币种:<b>{{huobi(i.currency)}}</b>
							</span>
							<span>
								开仓:<b>{{(i.addtime+'').replace('T',' ').split('.')[0]}}</b>
							</span>
							<span>
								平仓:<b>{{(i.endtime + '').replace('T',' ')}}</b>
							</span>
							<span>
								买价:<b>{{resetstr(i.buyPrice)}}</b>
							</span>
							<span>
								卖价:<b>{{resetstr(i.sellPrice)}}</b>
							</span>
							<span>
								手数:<b>{{resetstr(i.nums)}}</b>
							</span>
							
						</div>
					</li>
				</ul>
				<text style="color: red;display: block;margin-top: 100px;text-align: center;" v-if="lishidata.length == 0">
					暂无数据！
				</text>
				<uni-load-more iconType="snow" :iconSize="20" :status="loadtype" v-if="loadtype && lishidata.length >=3"/>
				</view></swiper-item>
				<swiper-item>
					<view class="swiper-item" id="lishi">
				<block class="h-list" v-if="cicangdata.length">
					<view class="h-box border-tp" style="position: fixed;top: 10px;width: 100%;">
					
						<view>
							合约
						</view>
						<view>
							方向
						</view>
						<view>
							手数
						</view>
						<view>
							买价
						</view>
						<view>
							建仓时间
						</view>
					</view>
				</block>
				<block class="h-list" v-for="i,index in cicangdata">
					<view class="h-box h-boxs border-bt border-tp" :style="{'margin-top':index==0?'40px':0}">
						<view>
							<text style="font-size: 14px;">{{i.commodityNo + i.contractDate}}</text>
						</view>
						<view>
							<text>{{i.orderSide==0?'卖':'买'  }}</text>
						</view>
						<view>
							<text>{{i.nums}}</text>
						</view>
						<view>
							<text >{{(i.buyPrice+'').replace('T',' ')}}</text>
						</view>
						<view>
							<text style="font-size: 12px;padding-top: 10px;display: block;">{{(i.addtime+'').split('T')[0]}}<br>{{(i.addtime+'').split('T')[1].split('.')[0]}}</text>
						</view>
					</view>
				</block>
				<block v-if="cicangdata.length==0">
					<text style="color: red;display: block;margin-top: 100px;text-align: center;">
						暂无数据！
					</text>
				</block>
				</view>
				</swiper-item>
			</swiper>
		</view>
		<view style="height: 40px;position: fixed;bottom: 0;left: 0;width: 100%;background: #fff;line-height:40px">
			<button type="default" style="color: #0081f0;line-height:40px;background: #fff;" @tap="gensui('/pages/echart/gensui?obj='+JSON.stringify(obj))" v-if="!followtype">订阅</button>
			<button type="default" style="color: red;line-height:40px;background: #fff;" @tap="$go('/pages/center/detail?uid='+obj.traderUid)" v-else>取消订阅</button>
		</view>
		
	</view>
</template>

<script>
// import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
// import uChart from '@/js_sdk/u-charts/u-charts/component';
var fenjie = 0,
	first = false;
var canvases = {};
export default {
	data() {
		return {
			topactive:false,
			guanzhunum:0,
			menutype:-1,
			pageModel:{
				page:1,
				count:1,
				length:10,
			},
			lishidata:[],//历史
			loadtype:false,//loading/noMore
			cicangdata:[],//持仓
			jiaoyitj: {},//交易统计
			index: 0,
			array: [{ name: '日' }, { name: '周' }, { name: '月' }],
			Url: this.$store.state.url1,
			nowid: 0,
			show: false,
			scrooldata: [{ name: '交易统计', height: 300 }, { name: '图表', height: 2400 }, { name: '历史', height: 500 }, { name: '持仓', height: 200 }],
			query: {
				uid: ''
			},
			cw: '',
			obj: {},
			height: 0,
			isguanzhu:true,
			leftdata:{},
			followtype:false
		};
	},
	components: {
		
	},
	onPullDownRefresh() {
	        // console.log('refresh');
	        // setTimeout(function () {
	        //     uni.stopPullDownRefresh();
	        // }, 1000);
	},
	onReachBottom(){
		// console.log(123)
		if(this.nowid != 2) return;
		var _this = this;
		if(_this.pageModel.count <= _this.pageModel.page){
			_this.loadtype = 'noMore';
			return;
		};
		_this.loadtype = 'loading';
		_this.pageModel.page = _this.pageModel.page + 1;
		_this.getdatas({
			url: _this.Url+ '/api/TraderAnalysis3/GetAllClosePosition',
			json: {
				uid: _this.obj.traderUid,
				page: _this.pageModel.page
			},
			fun: function(data) {
				// if(!data.data.data) return console.log('/api/TraderAnalysis3/GetAllClosePosition');
				for(var i in data.data.data.dateList){
					_this.lishidata.push(data.data.data.dateList[i]);
				};
				if(_this.pageModel.page <= 1){
					_this.pageModel.count = Math.ceil(data.data.data.page.count/data.data.data.page.pagesize);
					_this.pageModel.length = data.data.data.page.pagesize;
				}
				setTimeout(function(){
					let view = uni.createSelectorQuery().select('.lishicc');
					view.fields(
						{
							size: true,
							rect: true,
							scrollOffset: true
						},
						res => {
							// console.log(res.height)
							_this.scrooldata[2].height = res.height +75;
							_this.loadtype = false;
						}
					).exec();
				},200)
				// console.log(_this.pageModel.count)
			}
		});
		// uni.startPullDownRefresh();
	},
	onPageScroll: function(Object) {
		var sctop = Object.scrollTop;
		if(sctop>30){
			this.topactive = true;
		}else{
			this.topactive = false;
		}
		let view = uni.createSelectorQuery().select('.scrollT');
		view.fields(
			{
				size: true,
				rect: true,
				scrollOffset: true
			},
			res => {
				// console.log(res)
				if (res.top <= res.height) {
					this.show = true;
				} else {
					this.show = false;
				}
			}
		).exec();
	},
	methods: {
		tap(){
			console.log(123)
		},
		goback(){
			uni.navigateBack()
		},
		gensui(url){
			this.$go(url,true)
		},
		guanzhu(id){//关注
			if(!this.$store.state.user){
				uni.showToast({
					title: '请登录后重试!',
					icon: 'none',
					duration:2000
				});
				this.$go('/pages/login/login')
				return;
			};
			var _this= this;
			uni.request({
				url: _this.$store.state.url + '/api/shequuser/mycenter/addoreidtmyfocus?ftoken='+_this.$store.state.user.token+'&ftraderuid='+this.obj.traderUid+'&ftraderacc='+this.obj.traderName+'&fstate='+id,
				method: 'POST',
				// data: _this.param,
				
				success: res => {
					res = res.data;
					if (res.code == 200) {
						if(id == 1){
							_this.isguanzhu = false;
							_this.guanzhunum = _this.guanzhunum + 1;
							uni.showToast({
								title: '已关注！',
								icon:'none',
								duration:2000
							});
						}else{
							_this.isguanzhu = true;
							_this.guanzhunum = _this.guanzhunum - 1;
							uni.showToast({
								title: '已取消！',
								icon:'none',
								duration:2000
							});
						}
						_this.$store.commit('getcollection');
					} else {
					}
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		huobi: function(obj) {
			if (typeof(obj) == "object" && obj != null) {
				var str = obj.currencyCode ? obj.currencyCode + '/' : '';
				var str1 = obj.currencyName ? obj.currencyName : '';
				return str + str1;
			} else {
				return 'null';
			}
			// return '';
		},
		clickmenu(id){
			var _this = this;
			console.log(12312)
			if(id == this.menutype){
				this.menutype = -1;
			}else{
				this.menutype = id;
 			}
		},
		setUrl(text) {
			if (text.indexOf('http') == 0) {
				return text;
			}
			return this.$store.state.url1 + text;
		},
		taptap(id) {
			this.nowid = id;
			
		},
		goback() {
			uni.navigateBack();
		},
		getdata() {
			var _this = this;
			uni.getNetworkType({
				success: function(res) {
					if (res.networkType == 'none') {
						uni.showToast({
							title: '当前无网络连接，请检查！',
							icon: 'none',
							duration: 5000

							// position:'top'
						});
					}
				}
			});
			uni.onNetworkStatusChange(function(res) {
				if (!res.isConnected) {
					uni.showToast({
						title: '当前无网络连接，请检查！',
						icon: 'none',
						duration: 3000
						// position:'top'
					});
				} else {
					uni.showToast({
						title: '网络已连接！',
						icon: 'none',
						duration: 3000
						// position:'top'
					});
					_this.getdata();
				}
			});
			if(this.$store.state.user){
				this.getdatas({
					type:'POST',
					url: _this.$store.state.url + '/api/shequuser/mycenter/tradermyfocusstate?ftoken='+_this.$store.state.user.token+'&ftraderuid='+_this.obj.traderUid+'&ftraderacc='+_this.obj.traderName,
					fun: function(data) {
						if(data.data.code){
							// console.log(data.data.data)
							
							if(data.data.data){
								_this.isguanzhu = false;
							}else{
								_this.isguanzhu = true;
							}
						}
						
						
					}
				});
			};
			this.getdatas({
				url: _this.Url + '/api/TraderAnalysis3/GetTrderDealAnalysisInfo',
				json: {
					uid: _this.obj.traderUid
				},
				fun: function(data) {
					if (!data.data) return console.log('/api/TraderAnalysis3/GetTrderDealAnalysisInfo');
					_this.jiaoyitj = data.data.data;
					setTimeout(function(){
						let view = uni.createSelectorQuery().select('.gript');
						view.fields(
							{
								size: true,
								rect: true,
								scrollOffset: true
							},
							res => {
								_this.scrooldata[0].height = res.height +90;
							}
						).exec();
					},200)
					
				}
			});
			this.getdatas({
				url: _this.Url+ '/api/TraderAnalysis3/GetAllOpenPosition',
				json: {
					uid: _this.obj.traderUid
				},
				fun: function(data) {
					// if(!data.data.data) return console.log('/api/TraderAnalysis3/GetAllOpenPosition');
					_this.cicangdata = data.data.data?data.data.data:[];
					// console.log(data)
					setTimeout(function(){
						let view = uni.createSelectorQuery().select('#lishi');
						view.fields(
							{
								size: true,
								rect: true,
								scrollOffset: true
							},
							res => {
								// console.log(res)
								_this.scrooldata[3].height = res.height +100;
							}
						).exec();
					},200)
				},
				
			});
			
			_this.getdatas({
				url: _this.Url+ '/api/TraderAnalysis3/GetAllClosePosition',
				json: {
					uid: _this.obj.traderUid,
					page: _this.pageModel.page
				},
				fun: function(data) {
					if(!data.data.data) return console.log('/api/TraderAnalysis3/GetAllClosePosition');
					for(var i in data.data.data.dateList){
						_this.lishidata.push(data.data.data.dateList[i]);
					};
					if(_this.pageModel.page <= 1){
						_this.pageModel.count = Math.ceil(data.data.data.page.count/data.data.data.page.pagesize);
						_this.pageModel.length = data.data.data.page.pagesize;
					}
					setTimeout(function(){
						let view = uni.createSelectorQuery().select('.lishicc');
						view.fields(
							{
								size: true,
								rect: true,
								scrollOffset: true
							},
							res => {
								// console.log(res)
								_this.scrooldata[2].height = res.height +75;
							}
						).exec();
					},200)
					// console.log(_this.pageModel.count)
				}
			});
			_this.getdatas({
				url: _this.Url+'/api/TraderAnalysis3/GetTrderanalysisSimpleInfo',
				json: {
					uid: _this.obj.traderUid
				},
				fun: function(data) {
					if(data.data.code == 200){
						_this.leftdata = data.data.data
					}else{
						console.log(_this.Url+'/api/TraderAnalysis3/GetTrderanalysisSimpleInfo')
					}
					
					// console.log(_this.leftdata	)
				}
			});
			_this.getdatas({
				type:'POST',
				url: _this.$store.state.url+'/api/shequuser/mycenter/tradermyfocuscount?ftraderuid='+_this.obj.traderUid+'&ftraderacc	='+_this.obj.traderName,
				fun: function(data) {
					if(data.data.code == 200){
						// console.log(data.data.data.count)
						_this.guanzhunum = data.data.data.count;
					}else{
					}
					// console.log(_this.leftdata	)
				}
			});
			_this.getdatas({
				type:'get',
				url: _this.$store.state.url1+'/api/FollowSetting/GetManagerSubTradedrFollowingList?uid='+_this.obj.traderUid+'&token='+_this.$store.state.user.token,
				fun: function(data) {
					console.log(data.data.data)
					if(data.data.code == 200){
						if(!data.data.data.length){
							_this.followtype = false;
						}else{
							_this.followtype = true;
						}
					}else{
					}
					// console.log(_this.leftdata	)
				}
			});
		}
	},
	mounted() {
	},
	onShow() {
		this.cw = uni.getSystemInfoSync().windowWidth;
		this.height = uni.getSystemInfoSync().windowHeight;
		// this.scrooldata[1].height = uni.getSystemInfoSync().windowHeight;
		this.getdata();
	},
	onLoad(e) {
		this.obj = JSON.parse(e.obj);
		// uni.startPullDownRefresh({
		// 	success(e){
		// 		console.log(e)
		// 	}
		// });
	}
};
</script>

<style scoped>
.top {
	height:500rpx;
	position: relative;
	background: rgba(0, 0, 0, 0.7);
	background-size: cover;
	overflow: hidden;
}
.top uni-image {
	position: absolute;
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	top: 160rpx;
	left: 5%;
	background: red;
	z-index: 10;
}
.top .img1 {
	width: 750rpx;
	/* margin-top: ; */
	height:700rpx;
	border-radius: 0;
	transform: translate(-50%, -50%);
	/* border-radius: unset; */
	z-index: -1;
	opacity: 1;
	top: calc(50% - 100rpx) ;
	left: 50%;
}
.top uni-button {
	float: right;
	line-height: unset;
	padding: 5px 10px;
	font-size: 13px;
	position: absolute;
	bottom: 40rpx;
	right: 10px;
	background: #0081f0;
	color: #fff;
}
.div {
	/* max-width: 58%; */
	margin-top: 10px;
}
.div > h5 {
	margin-top: 15px;
	font-size: 18px;
	font-weight: 600;
	color: #000;
	margin-bottom: 12px;
	text-align: center;
}
.div > * {
	margin: 0;
	font-size: 13px;
	padding-left: 10px;
}
.div > span {
	font-size: 13px;
	color: #666;
}
.div > .p1 {
	margin: 5px 0;
}
.div > .p1 b {
	background: #0081f0;
	color: #fff;
	padding: 2px 3px;
	border-radius: 3px;
}
.div > .p1 span {
	color: #0081f0;
}
.div > .p2 {
	margin-top: 6px;
	margin-bottom: 4px;
}
.div > .p2 span {
	color: #333;
	font-size: 13px;
}

.scroll-view_H {
	display: flex;
	flex-direction: row;
	/* position: fixed; */
	width: 100%;
	/* #ifdef APP-PLUS */
	top: 0;
	/* #endif */
	/* #ifndef APP-PLUS */
	top: 44px;
	/* #endif */
	background: #fff;
	z-index: 10;
	/* border-top: 10px solid #e8e8e8; */
}

.scroll-view-item_H {
	padding: 5px;
	flex: 1;
	display: inline-block;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 32rpx;
	/* border: 1px solid #e4e2e2; */
	box-sizing: content-box;
	/* border-bottom: 1px solid #e4e2e2; */
	/* border-top: 1px solid #e4e2e2; */
}
.scroll-view-item_H:last-of-type {
	border-right: 0;
}
.scroll-view-item_H.active {
	padding-bottom: 4px;
	border: 0;
	box-sizing: content-box;
	border-bottom: 1px solid rgb(0, 122, 255);
	color: rgb(0, 122, 255);
}

.scrollT1 {
	position: fixed;
	z-index: 10;
	left: 0;
	width: 100%;
}
.gript {
	overflow: hidden;
	list-style: none;
	padding: 0;
	text-align: center;
	font-size: 13px;
}
.gript > * {
	float: left;
	width: 33.3333%;
	box-sizing: border-box;
	font-size: 12px;
	padding: 15px 0;
	position: relative;
}
.gript > li::after {
	content: '';
	width: 1px;
	height: 28px;
	display: block;
	background: #cccccc;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.gript > li.active::after{
	content: none;
}
.gript > * span {
	display: block;
	font-size: 14px;
	margin-bottom: 5px;
}
.h-box>uni-view{
		height: 30px;
		line-height: 30px;
		float: left;
		text-align: center;	
		color: #000;
		
		font-size: 14px;
		width: 20%;
		float: left;
		border-left: .5px solid #e5e5e5;
		box-sizing: border-box;
	}
	.h-box>uni-view:nth-of-type(2),.h-box>uni-view:nth-of-type(3){
		width: 15%;
	}
	.h-box>uni-view:nth-of-type(4),.h-box>uni-view:nth-of-type(5){
		width: 25%;
	}
	.h-box{overflow: hidden;}
	/* .h-box>uni-view:first-of-type{padding-left: 5px;} */
	/* .h-box>uni-view:last-of-type{padding-right: 5px;} */
	/* .h-box{background: -webkit-gradient(linear,0 100%, 100% 100%, from(rgba(4, 110, 246,0)), to(rgba(4, 110, 246,1)));} */
	.h-boxs>uni-view{
		height: auto;
		/* padding: 15px 0; */
		line-height: normal;
		font-size: 14px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		color: #9b9b9b;
		height: 60px;
		line-height: 60px;
	}
		.h-boxs>uni-view:last-of-type{
			line-height: 20px;
		}
	.h-boxs>uni-view uni-view {
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		display: block;
	}
	.lishicc{
		padding: 0;
		margin: 0;
		border-bottom: #efe9e9;
	}
	.lishicc li{position: relative;}
	.lishicc li> p{overflow: hidden;padding: 0 15px;}
	.lishicc li> p span:first-of-type{float: left;font-size: 14px;color: #000;}
	.lishicc li> p span:last-of-type{float: right;font-size: 13px;color: #868686;}
	.lishicc li> p:last-of-type{padding-bottom: 10px;}
	.lishicc li>div{
		position: absolute;
		top: 100%;
		z-index: 10;
		display: block;
		transition: all .3s ease;
		clear: both;
		padding: 0 15px;
		font-size: 12px;
		color: #fff;
		overflow: hidden;
		background: #ccc;
		height: 0;
	}
	.lishicc li.active>div{
		height: 145px;
	}
	.lishicc li>div span{
		display: block;width: 50%;
		float: left;
		padding: 5px 0;
	}
	.lishicc li>div span b{font-size: 13px;color: rgba(255,255,255,.7);font-weight: 100;}
</style>
